---
title: Migrer depuis Hugo
description: Conseils pour la migration d'un projet Hugo existant vers Astro
sidebar:
  label: Hugo
type: migration
stub: true
framework: Hugo
i18nReady: true
---

import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
import { CardGrid, LinkCard } from '@astrojs/starlight/components';

[Hugo](https://gohugo.io) est un générateur de sites statiques open-source construit sur Go.

## Principales similitudes entre Hugo et Astro

Hugo et Astro partagent certaines similitudes qui vous aideront à migrer votre projet :

- Hugo et Astro sont tous deux des générateurs de sites statiques modernes, idéalement adaptés aux [sites web axés sur le contenu](/fr/concepts/why-astro/#axé-sur-le-contenu) comme les blogs.

- Hugo et Astro vous permettent tous deux de [rédiger votre contenu en Markdown](/fr/guides/markdown-content/). Cependant, Hugo inclut plusieurs propriétés spéciales de frontmatter et vous permet d'écrire du frontmatter en YAML, TOML ou JSON. Même si la plupart de vos propriétés de frontmatter Hugo existantes ne seront pas « spéciales » dans Astro, vous pouvez continuer à utiliser vos fichiers Markdown existants et vos valeurs de frontmatter YAML (ou TOML).

- Hugo et Astro vous permettent tous deux d'améliorer votre site avec une variété [d'intégrations et de paquets externes](https://astro.build/integrations/).



## Différences clés entre Hugo et Astro

Lorsque vous recréez votre site Hugo dans Astro, vous remarquerez quelques différences importantes :

- Hugo utilise Go Templating pour la création de modèles de pages. La [syntaxe Astro](/fr/basics/astro-components/) est un surensemble de HTML similaire à JSX.

- Astro n'utilise pas de shortcodes pour le contenu dynamique dans les fichiers Markdown standard, mais [l'intégration MDX d'Astro](/fr/guides/integrations-guide/mdx/) vous permet d'utiliser JSX et d'importer des composants dans les fichiers MDX.

- Alors qu'Hugo peut utiliser des « fichiers partiels » pour des éléments de mise en page réutilisables, [Astro est entièrement basé sur des composants](/fr/basics/astro-components/). Tout fichier `.astro` peut être un composant, une mise en page ou une page entière, et peut importer et afficher n'importe quel autre composant Astro. Les composants Astro peuvent également inclure [d'autres composants d'interface utilisateur (par exemple React, Svelte, Vue, Solid)](/fr/guides/framework-components/) ainsi que du contenu ou des métadonnées provenant [d'autres fichiers de votre projet](/fr/guides/imports/), tels que Markdown ou MDX.

## Passer de Hugo à Astro

Pour convertir un blog Hugo en Astro, commencez par notre modèle de démarrage de thème de blog, ou explorez d'autres thèmes de blog communautaires dans notre [vitrine de thèmes](https://astro.build/themes/).

Vous pouvez passer un argument `--template` à la commande `create astro` pour démarrer un nouveau projet Astro avec l'un de nos modèles officiels. Vous pouvez aussi [démarrer un nouveau projet à partir de n'importe quel dépôt Astro existant sur GitHub](/fr/install-and-setup/#utiliser-un-thème-ou-un-modèle-de-démarrage).

  <PackageManagerTabs>
    <Fragment slot="npm">
    ```shell
    npm create astro@latest -- --template blog
    ```
    </Fragment>
    <Fragment slot="pnpm">
    ```shell
    pnpm create astro@latest --template blog
    ```
    </Fragment>
    <Fragment slot="yarn">
    ```shell
    yarn create astro --template blog
    ```
    </Fragment>
  </PackageManagerTabs>

Apportez vos fichiers Markdown existants (ou MDX, avec notre intégration optionnelle) comme contenu à [créer des pages Markdown ou MDX](/fr/guides/markdown-content/). Astro autorise les frontmatters YAML ou TOML dans ces fichiers, donc si vous utilisez des frontmatters JSON, vous devrez les convertir.

Pour continuer à utiliser du contenu dynamique tel que des variables, des expressions ou des composants d'interface utilisateur dans votre contenu Markdown, ajoutez l'intégration MDX facultative d'Astro et convertissez vos fichiers Markdown existants en [pages MDX](/fr/guides/markdown-content/). MDX prend en charge les frontmatters YAML et TOML, vous pouvez donc conserver vos propriétés de frontmatter existantes. Mais vous devez remplacer toute syntaxe de shortcode par [la syntaxe propre à MDX](https://mdxjs.com/docs/what-is-mdx/#mdx-syntax), qui autorise les expressions JSX et/ou les importations de composants.

Pour convertir d'autres types de sites, comme un portfolio ou un site de documentation, consultez les modèles de démarrage officiels sur [astro.new](https://astro.new). Vous trouverez un lien vers le dépôt GitHub de chaque projet, ainsi que des liens en un clic pour ouvrir un projet fonctionnel dans les environnements de développement en ligne IDX, StackBlitz, CodeSandbox et Gitpod.

## Ressources communautaires

<CardGrid>

  <LinkCard title="L'histoire de la migration d'Elio Struyf de Hugo vers Astro (Anglais)" href="https://www.eliostruyf.com/migration-story-hugo-astro/"/>

  <LinkCard title="Hugo Vs Astro - Quel générateur de site statique choisir en 2023 (Anglais)" href="https://onebite.dev/hugo-vs-astro-which-static-site-generator-to-choose-in-2023/"/>

  <LinkCard title="Leçons tirées d'une migration assistée par l'IA vers Astro (Anglais)" href="https://bennet.org/blog/lessons-from-ai-assisted-migration-to-astro/" />

</CardGrid>

:::note[Vous avez une ressource à partager ?]
Si vous avez trouvé (ou créé !) une vidéo ou un article de blog utile sur la conversion d'un site Hugo en site Astro, [ajoutez-le à cette liste](https://github.com/withastro/docs/edit/main/src/content/docs/en/guides/migrate-to-astro/from-hugo.mdx) !
:::
